<template>
<div class="container">
   <canvas id="canvas" width="1300" :height="canvasHeight"></canvas>
</div>
  <div class="imgList" style="display: none">
    <img :src="imgUrl('pumpOff.png')" id="pumpOff" alt="">
  </div>
</template>

<script setup>
import imgUrl from "@/utils/loadImg";
import { ref, computed, onMounted, onUnmounted } from "vue";
const data = ref([
  {
    waterBox:[123,234,213,234,213],
    entryPress:0.204,
    flow:100,
    pumpList:[2,2,3,2,3],
    outPress:0.329,
    areaList:['杏园生活区','李园生活区,梅园生活区，桃园生活区,榴园生活区','橘园生活区']
  },{
    waterBox:[542,245],
    entryPress:0.104,
    flow:244,
    pumpList:[1,2,3,4],
    outPress:0.329,
    areaList:['杏园生活区','李园生活区,梅园生活区，桃园生活区,榴园生活区','橘园生活区']
  }
])

const canvasHeight = computed(() => {
  let childCount = 0
  data.value.forEach(d => {
    childCount += d.pumpList.length
  })
  //按照一个水泵80px的高度，每个机组向下增加100px间距,顶部新增100px空白
  childCount = childCount * 80 + data.value.length * 100 + 100
  return childCount
})
//定义第一机组第一水泵的起始位置
const startX = 800
const startY = 100
const countPoint = (x,y,data) => {
  const allPumpList = []
  data.forEach((d,idx) => {
    console.log('计算机组绘制点');
    let preItemChildNumber = 0
    for(let i = 0; i< idx; i++){
      preItemChildNumber += data[i].pumpList.length
    }
    const itemOriginX = x //机组计算起始点x
    const itemOriginY = y + preItemChildNumber * 80 +  (idx * 100)//机组计算起始点y
    // console.log('计算原点',itemOriginX,itemOriginY);

    // 水泵位置集合
    const pumpListWithLocation = []
    d.pumpList.forEach((d,idx) => {
      pumpListWithLocation.push({
        status:d,
        x:itemOriginX,
        y:itemOriginY + idx * 80
      })
    })
    // console.log('水泵位置集合',pumpListWithLocation);//水泵组中各水泵绘制坐标

    //水泵组入水口
    let pumpEntryX = 800 - 100
    let pumpEntryY = 0
    if(pumpListWithLocation.length === 1){
      pumpEntryY = pumpListWithLocation[0].y
    }else{
      pumpEntryY = (pumpListWithLocation[0].y + pumpListWithLocation[pumpListWithLocation.length -1].y) / 2
    }
    // console.log('水泵组入水口',pumpEntryX,pumpEntryY);

    //稳压罐位置
    let surgeTankX = pumpEntryX - 100
    let surgeTankY = pumpEntryY
    // console.log('稳压罐位置',surgeTankX,surgeTankY);

    //流量计位置
    let flowX = surgeTankX - 100
    let flowY = surgeTankY
    // console.log('流量计位置',flowX,flowY);

    //入口压力表位置
    let entryPressX = flowX - 100
    let entryPressY = flowY
    // console.log('入口压力表位置',entryPressX,entryPressY);

    //水箱位置
    let waterBoxX = entryPressX - 100
    let waterBoxY = entryPressY
    // console.log('水箱位置',waterBoxX,waterBoxY);

    //水泵组出水口
    let pumpOutX = 800 + 100
    let pumpOutY = 0
    if(pumpListWithLocation.length === 1){
      pumpOutY = pumpListWithLocation[0].y
    }else{
      pumpOutY = (pumpListWithLocation[0].y + pumpListWithLocation[pumpListWithLocation.length -1].y) / 2
    }
    // console.log('水泵组出水口',pumpOutX,pumpOutY);

    //出口压力表位置
    let outPressX = pumpOutX + 100
    let outPressY = pumpOutY
    // console.log('出口压力表位置',outPressX,outPressY);

    //生活区位置
    let areaX = outPressX + 100
    let areaY = outPressY
    // console.log('生活区位置',areaX,areaY);
    const item = {
      waterBox:{
        x:waterBoxX,
        y:waterBoxY,
        value:d.waterBox
      },
      entryPress:{
        x:entryPressX,
        y:entryPressY,
        value:d.entryPress
      },
      flow:{
        x:flowX,
        y:flowY,
        value:d.flow
      },
      surgeTank:{
        x:surgeTankX,
        y:surgeTankY,
      },
      pumpEntry:{
        x:pumpEntryX,
        y:pumpEntryY
      },
      pumpList:pumpListWithLocation,
      pumpOut:{
        x:pumpOutX,
        y:pumpOutY
      },
      outPress:{
        x:outPressX,
        y:outPressY,
        value:d.outPress
      },
      areaList:{
        x:areaX,
        y:areaY,
        value:d.areaList
      }
    }
    allPumpList.push(item)
  })

  let beginX = 800 - 650
  let beginY = 0
  if(allPumpList.length === 1){
    beginY = allPumpList[0].waterBox.y
  }else{
    beginY = (allPumpList[0].waterBox.y + allPumpList[allPumpList.length -1].waterBox.y) / 2
  }
  console.log(allPumpList);
  return {
    beginX,
    beginY,
    allPumpList
  }
}

// const { beginX, beginY, allPumpList } = countPoint(startX,startY,data.value)
// console.log(beginX, beginY, allPumpList);

const drawLine = (ctx,x1,y1,x2,y2,hasMiddle,isOut,lineWidth = 8) => {
  const middleX = (x1 + x2)/2
  ctx.strokeStyle = "#CDD3E1"; // 设置描边颜色为红色
  ctx.setLineDash([]);
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  if(hasMiddle){
    ctx.lineTo(middleX, y1);
    ctx.lineTo(middleX, y2);
  }else{
    if(isOut){
      ctx.lineTo(x2, y1);
    }else{
      ctx.lineTo(x1, y2);
    }
  }
  ctx.lineTo(x2, y2);
  ctx.lineJoin = 'round';
  ctx.stroke();
}

// eslint-disable-next-line no-unused-vars
let  offset = 0
const drawDashLine = (ctx,x1,y1,x2,y2,hasMiddle,isOut,offset) => {
  const middleX = (x1 + x2)/2
  ctx.strokeStyle = "#4AA5A6"; // 设置描边颜色
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.setLineDash([10,5]);//设定实线与空白的大小
  ctx.moveTo(x1, y1);
  if(hasMiddle){
    ctx.lineTo(middleX, y1);
    ctx.lineTo(middleX, y2);
  }else{
    if(isOut){
      ctx.lineTo(x2, y1);
    }else{
      ctx.lineTo(x1, y2);
    }
  }
  ctx.lineTo(x2, y2);
  ctx.lineJoin = 'round';
  ctx.lineDashOffset = -offset;
  ctx.stroke();
}
const drewImg = (ctx,x,y,url) => {
  let img = document.getElementById(url);
  const imgOriginX = x - (img.width / 2)
  const imgOriginY = y - (img.height / 2)
  ctx.drawImage(img,imgOriginX,imgOriginY)
}


let timer = null
const drawCanvas = () => {
  const { beginX, beginY, allPumpList } = countPoint(startX,startY,data.value)
  let canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    let ctx = canvas.getContext("2d");
    let offset = 0
    timer = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      offset += 2
      if(offset > 2000) offset = 0
      allPumpList.forEach((d) => {
        drawLine(ctx,beginX,beginY,d.waterBox.x,d.waterBox.y,true,false)
        drawLine(ctx,d.waterBox.x,d.waterBox.y,d.entryPress.x,d.entryPress.y,true,false)
        drawLine(ctx,d.entryPress.x,d.entryPress.y,d.flow.x,d.flow.y,true,false)
        drawLine(ctx,d.flow.x,d.flow.y,d.surgeTank.x,d.surgeTank.y,true,false)
        drawLine(ctx,d.surgeTank.x,d.surgeTank.y,d.pumpEntry.x,d.pumpEntry.y,true,false)
        d.pumpList.forEach(item => {
          drawLine(ctx,d.pumpEntry.x,d.pumpEntry.y,item.x,item.y, false,false, 3)
          drawLine(ctx,item.x,item.y,d.pumpOut.x,d.pumpOut.y,false,true,3)
        })
        drawLine(ctx,d.pumpOut.x,d.pumpOut.y,d.outPress.x,d.outPress.y,true,false)
        drawLine(ctx,d.outPress.x,d.outPress.y,d.areaList.x,d.areaList.y,true,false)
        drawDashLine(ctx,beginX,beginY,d.waterBox.x,d.waterBox.y,true,false,offset)
        drawDashLine(ctx,d.waterBox.x,d.waterBox.y,d.entryPress.x,d.entryPress.y,true,false,offset)
        drawDashLine(ctx,d.entryPress.x,d.entryPress.y,d.flow.x,d.flow.y,true,false,offset)
        drawDashLine(ctx,d.flow.x,d.flow.y,d.surgeTank.x,d.surgeTank.y,true,false,offset)
        drawDashLine(ctx,d.surgeTank.x,d.surgeTank.y,d.pumpEntry.x,d.pumpEntry.y,true,false,offset)
        d.pumpList.forEach(item => {
          drawDashLine(ctx,d.pumpEntry.x,d.pumpEntry.y,item.x,item.y, false,false, offset)
          if([1,4].includes(item.status)){
            drawDashLine(ctx,item.x,item.y,d.pumpOut.x,d.pumpOut.y,false,true,offset)
          }
        })
        if(d.pumpList.some(d => [1,4].includes(d.status))){
          drawDashLine(ctx,d.pumpOut.x,d.pumpOut.y,d.outPress.x,d.outPress.y,true,offset)
          drawDashLine(ctx,d.outPress.x,d.outPress.y,d.areaList.x,d.areaList.y,true,offset)
        }

        drewImg(ctx,beginX,beginY,'pumpOff')
      })

    },100)


  }
}
onMounted(() => {
  drawCanvas()
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped lang="scss">
#canvas{
  //width: 1300px;
  //height:v-bind('canvasHeight');
}
</style>